<template>
  <div class="dashboard-container">
    <div class="grid-container">
      <!-- 上方两个卡片 -->
      <div class="top-chart top-left">
        <div class="panel-header">
          <h3 class="panel-title">
            <el-icon><document /></el-icon>
            <span>案例事实</span>
          </h3>
        </div>
        <card1/>
      </div>
      <div class="top-chart top-right">
        <div class="panel-header">
          <h3 class="panel-title">
            <el-icon><search /></el-icon>
            <span>查明案例事实</span>
          </h3>
        </div>
        <card2/>
      </div>
      
      <!-- 中间主表格 -->
      <div class="main-table">
        <div class="panel-header">
          <h3 class="panel-title">
            <el-icon><tickets /></el-icon>
            <span>案件展示</span>
          </h3>
          <div class="panel-actions">
            <el-button size="small" type="primary" plain>导出</el-button>
            <el-button size="small" plain>刷新</el-button>
          </div>
        </div>
        <table2/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Document, Search, Tickets } from '@element-plus/icons-vue'
import table2 from './component/table2.vue'
import card1 from './component/card1.vue'
import card2 from './component/card2.vue'
</script>

<style scoped>
.dashboard-container {
  width: 100%;
  height: 100vh;
  padding: 24px;
  background: linear-gradient(135deg, #f6f8fa 0%, #e9edf2 100%);
  overflow: auto;
  position: relative;
}

.grid-container {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-rows: auto 1fr;
  gap: 24px;
  max-width: 1800px;
  margin: 0 auto;
  min-height: calc(100vh - 48px);
  height: auto;
}

/* 上方两个卡片 */
.top-chart {
  grid-row: 1;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: white;
  border: 2px solid transparent;
}

.top-left {
  grid-column: 1;
  background: linear-gradient(to bottom right, #f9fbfd, #ffffff);
  border-image: linear-gradient(to bottom right, #4e79a7, #6c8ebf) 2;
}

.top-right {
  grid-column: 2;
  background: linear-gradient(to bottom right, #f9fbfd, #ffffff);
  border-image: linear-gradient(to bottom right, #e15759, #eb8788) 2;
}

/* 中间主表格 */
.main-table {
  grid-column: 1 / span 2;
  grid-row: 2;
  min-height: 550px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: white;
  border: 2px solid transparent;
  border-image: linear-gradient(to bottom right, #59a14f, #7bb174) 2;
}

/* 通用面板样式 */
.panel-header {
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a3a72;
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-actions {
  display: flex;
  gap: 10px;
}

.chart-content, .table-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

/* 悬停效果 */
.top-chart:hover, .main-table:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.12);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
  }
  
  .top-left {
    grid-column: 1;
    grid-row: 1;
  }
  
  .top-right {
    grid-column: 1;
    grid-row: 2;
  }
  
  .main-table {
    grid-column: 1;
    grid-row: 3;
  }
}

/* 滚动条样式 */
.dashboard-container::-webkit-scrollbar {
  width: 10px;
}

.dashboard-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.dashboard-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.dashboard-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* 卡片内容区域 */
:deep(.el-card) {
  border: none;
  box-shadow: none;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.top-left {
  animation: fadeInUp 0.6s ease-out 0.1s both;
}

.top-right {
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.main-table {
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

/* 背景图案 */
.dashboard-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('path/to/your/pattern.png') repeat; /* 替换为实际图案路径 */
  opacity: 0.08;
  z-index: -1;
}
</style>